<template>
	<view>
		<view class="tel" v-if="bind">
			<view>您已绑定手机号</view>
			<view class="num">{{phonenumber}}</view>
		</view>
		<form v-else @submit="formSubmit">
			<view >
<!-- 				<view class="flex-row wrap ">
					<view class="line-title">姓 名：</view>
					<view class="line-content flex-row">
						<input name="truename" class="" type="text" :value="data.truename" placeholder="填写姓名"></input>
						<input name="number" type="hidden" :value="data.phone" style="display: none;"></input>
						
					</view>
				</view> -->
				<view class="flex-row wrap ">
					<view class="line-title">手机号：</view>
					<view class="line-content flex-row">
						<input name="number" class="" type="number" :value="data.phone" maxlength="11" @input='getnumber' placeholder="填写手机号"></input>
						<view class="send" v-if="send" @click="sendcode">发送验证码</view>
					</view>
				</view>
				<view class="flex-row wrap " >
					<view class="line-title">校验码：</view>
					<view class="line-content flex-row">
						<input name="code" type="number" placeholder="短信验证码"></input>
						<view class="chongfa" v-if="alreadySend">| {{second}}秒后重发</view>
					</view>
				</view>
			</view>
			<button form-type="submit" class="chongzhi">登陆</button>
		</form>

	</view>
</template>

<script>
	import api from "../../common/fxb.js"
	var app = getApp();
	export default {
		data() {
			return {
				bind: false,
				send: true,
				alreadySend: false,
				second: 60,
				number: "",
				uid: 21826,
				phonenumber:'',
				data:'',
				ynumber:""
			};
		},
		onLoad() {
			var that = this;
			uni.setNavigationBarTitle({
				title: '登陆'
			});
			api.ApiGet({
				do:'My_info',
			},function(res){ 
					that.data = res.data.datas
					that.ynumber =that.number = res.data.datas.phone
			})
		},
		methods: {
			checkphone: function() {
				var that = this;
				uni.getStorage({
					key: 'userInfo',
					complete(res) {

					}
				})
			},
			getnumber: function(e) {
				var value = e.detail.value;
				this.number = value;
				console.log(e.detail.value);
			},
			sendcode: function() {
				var that = this;
				var number = that.number;
				if (number == ""&&that.ynumber!=number) {
					return that.showModel("请输入手机号");
				} else {

					api.ApiGet({
						op:'yzm',
						do:'Sendsms',
						phone:number
					},function(res){ 
						if(res.data.code==400){
							return that.showModel(res.data.datas);
						}else{
							that.alreadySend = true;
							that.send = false;
							let promise = new Promise((resolve, reject) => {
								let setTimer = setInterval(function() {
									that.second = that.second - 1;
									// console.log(that.second);
									if (that.second <= 0) {
										that.second = 60;
										that.alreadySend = false;
										that.send = true;
										resolve(setTimer)
									}
								}, 1000)
							})
							promise.then((setTimer) => {
								clearInterval(setTimer)
							})
						}
					})
				}
			},

			formSubmit: function(e) {
				var that = this;
				var fdata = e.detail.value;
				if (fdata['number']=="") {
					return that.showModel('请填写手机号');
				}
				if (fdata['code']==""&&that.ynumber!="") {
					return that.showModel('请填写短信验证码');
				}
				var code = that.code;


				uni.showLoading({
					title: "加载中",
					mask: true,
					duration: 1000
				});
					api.ApiGet({
						op:'bang',
						do:'My_info',
						phone:fdata['number'],
						yzm:fdata['code'],
						truename:fdata['truename'],
					},function(res){ 
							return that.showModel(res.data.datas);
					})
					
			},
			showModel: function(hint_s) {
				var that = this;
				uni.showToast({
					title: hint_s,
					icon:"none"
				})
			},
		}
	}
</script>

<style lang="scss">
	.tel {
		width: 700upx;
		padding: 25upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30upx;

		.num {
			color: $theme-color;
		}
	}

	.weui-btn {
		width: 550upx;
		height: 80upx;
		margin: 20upx auto;
		border-radius: 80upx;
		background: $theme-color;
		font-size: 30upx;
		text-align: center;
		line-height: 80upx;
		color: #fff;
	}

	.wrap {
		padding: 20upx;
		font-size: 30upx;
		color: #333;
			border-bottom: 1upx solid #EEEEEE;
	}

	.flex-row {
		display: flex;
		align-items: center;
	}

	.row-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex {
		flex: 1;
	}

	.input {
		padding-right: 20upx;
		text-align: right;
	}

	.borderb {
		border-bottom: 1upx solid #e0e0e0;
	}

	radio {
		zoom: 0.9;
	}

	.tishi {
		font-size: 26upx;
		color: $theme-color;
		padding: 0 20upx;
		line-height: 1.6;
	}

	.fred {
		color: $theme-color;
	}

	.chongzhi {
		width: 500upx;
		height: 80upx;
		border-radius: 40upx;
		background-color: $theme-color;
		color: #fff;
		font-size: 30upx;
		text-align: center;
		line-height: 80upx;
		margin: 90upx auto;

	}

	.line-title {
		width: 20%;
	}

	.line-content {
		flex: 1;
	}

	.send {
		border: 2upx solid #e0e0e0;
		width: 180upx;
		height: 50upx;
		border-radius: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 28upx;
		color: #999;
	}

	.chongfa {
		color: #999;
	}
</style>
